<template>
  <div v-if="inited" class="av-wrap">
    <div v-show="!isPlaying" class="ico-bofang" @click="play" />
    <video-player
      ref="videoPlayer"
      class="video-player-box vjs-default-skin vjs-big-play-centered"
      :options="playerOptions"
      @play="onPlayerPlay"
      @ended="onPlayerEnded"
      @pause="onPlayerEnded"
      @ready="playerReadied"
    />
  </div>
</template>

<script>
// import { videoPlayer } from 'vue-video-player'
// import 'video.js/dist/video-js.css'
// import 'vue-video-player/node_modules/video.js/dist/video-js.css'
export default {
  name: 'HeyAv',
  components: {

  },
  props: {
    src: {
      type: String,
      required: true
    },
    option: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      inited: false,
      isPlaying: false,
      playerOptions: {

      }
    }
  },
  computed: {},
  watch: {
    src() {
      this.initAv()
    }
  },
  created() {
    this.initAv()
    window.avList = window.avList || []
  },
  mounted() {
    /* this.playerOptions.sources.push({
        type: 'video/mp4',
        src: 'http://ipsosdscj.oss-cn-qingdao.aliyuncs.com/surveytest/8f70715d-996a-44fb-a0d4-e42d68f7e865/c9317b48-4dc9-4d0d-bab8-502f4deb0516.mp4'
      }) */
  },
  methods: {
    initAv() {
      this.inited = false
      const { option, src } = this
      if (src) {
        this.$nextTick(_ => {
          const playerOptions = {
            muted: false,
            language: 'zh',
            height: '140',
            width: '240',
            controls: true,
            playbackRates: [0.7, 1.0, 1.5, 2.0],
            poster: ''
          }
          Object.assign(playerOptions, option)
          playerOptions.sources = [{
            src: /* process.env.OSS_URL + */src,
            type: 'video/mp4'
          }]
          this.playerOptions = playerOptions
          this.inited = true
        })
      }
    },
    playerReadied(player) {
      this.player = player
      window.avList.push(player)
    },
    onPlayerEnded(item, player) {
      this.isPlaying = false
    },
    onPlayerPlay(player) {
      window.avList.forEach(playerItem => {
        if (playerItem !== player) {
          playerItem.pause()
        }
      })
      this.isPlaying = true
    },
    play(item) {
      this.player.play()
    }
  }
}
</script>

<style lang="scss" scoped>
  .av-wrap {
    position: relative;
  }
  .ico-bofang {
    /*position: absolute;
    z-index: 2;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('~@/assets/images/icon/ico-bofang.png') no-repeat;
    background-size: 100% 100%;*/
  }
</style>
